import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
const LeftTop: React.FC = () => {
  const chartRef = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    if (chartRef.current) {
      const chartInstance = echarts.init(chartRef.current);
      const option = {
        title: {},
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            // mark: { show: true },
            // dataView: { show: true, readOnly: false },
            // restore: { show: true },
            // saveAsImage: { show: true },
          },
        },
        series: [
          {
            // name: "Area Mode",
            type: "pie",
            radius: [20, 90],
            center: ["50%", "50%"],
            roseType: "area",
            // itemStyle: {
            //   borderRadius: 5,
            // },
            data: [
              { value: 20, name: "监控类" },
              { value: 60, name: "消防类" },
              { value: 26, name: "其他类" },
            ],
          },
        ],
      };
      chartInstance.setOption(option);
      window.addEventListener("resize", () => {
        chartInstance.resize();
      });
      return () => {
        window.removeEventListener("resize", () => {
          chartInstance.resize();
        });
        chartInstance.dispose();
      };
    }
  }, []);
  return <div ref={chartRef} style={{ widows: "100%", height: "100%" }}></div>;
};
export default LeftTop;
